<template>
<!-- 商品详情页点击监听 -->
  <div class="goods-item" @click="itemClick">
    <!--具体怎么展示在这 show.img & title & price& cfav都是图片对象里面的属性-->
    <img :src="showimg" alt="" @load="imageLoad">
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <span class="price">{{goodsItem.price}}</span>
      <!-- cfav 收藏量-->
      <span class="collect">{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GoodsListItem",
    props: {
      goodsItem: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    //为什么写这个计算属性,为了复用组件★★★★
    computed:{
      showimg(){
        return this.goodsItem.image || this.goodsItem.show.img
      }
    },
    methods:{
      //监听图片加载完成事件
      imageLoad(){
        //问题在于 这个组件里监听图片加载完成时候如何执行Scroll里面的refresh方法????
        //发射一个事件总线  在首页监听 ★
        if(this.$route.path.includes('/home')){
          this.$bus.$emit('FiritemImageLoad')
        }else if(this.$route.path.includes('/Detail')){
          //问题2:详情页的图片加载完成的时候不需要告诉首页我图片加载完成了所以需要加个判断
          //各发射各自的图片加载完成事件
          this.$bus.$emit('itemImageLoad')
        }

      },
      itemClick(){
          //监听goods的点击进入对应详情页(url路由值的跳转)

        this.$router.push('/Detail/'+this.goodsItem.iid)
          //这里可以push一个对象,包含path 和query
      }
    }
  /*
  七.解决首页中可滚动区域的问题
  Better-Scroll在决定有多少区域可以滚动时,是根据scrollerHeight属性决定
  scrollerHeight属 性是根据放Better-Scroll的content中的子组件的高度
  但是我们的首页中,刚开始在计算scrollerHeight属性时,是没有将图片计算在内的
  所以,计算出来的告诉是错误的(1300+)
  后来图片加载进来之后有了新的高度,但是scrollerHeight属性并没有进行更新.
  所以滚动出现了问题(滚不动)
  如何解决这个问题了?
  监听每张图片是否加载完成,只要有一张图片加载完成了,执行一次refresh()
  如何监听图片加载完成了?
  原生的js监听图片: img.onload = function() {}
  Vue中监听: @load='方法'
  调用scroll的refresh()
  如何将GoodsListltem.vue中 的事件传入到Home.vue中？
  因为涉及到非父子组件的通信,所以这里我们选择了事件总线
  bus ->公共汽车/总线
  bus->总线
  Vue.prototype.$bus = new Vue()
  发出:this.$bus.$emit(‘事件名称', 参数)
  首页接收:this.$bus.$on(‘事件 名称,回调函数(参数))


 */
  }
</script>

<style scoped>
  .goods-item {
    padding-bottom: 40px;
    position: relative;
    /*每张图片占的屏幕比,结合flex-wrap: wrap*/
    width: 48%;
  }

  .goods-item img {
    width: 100%;
    border-radius: 5px;
  }

  .goods-info {
    font-size: 12px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
  }

  .goods-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
  }

  .goods-info .price {
    color: var(--color-high-text);
    margin-right: 20px;
  }

  .goods-info .collect {
    position: relative;
  }

  .goods-info .collect::before {
    content: '';
    position: absolute;
    left: -15px;
    top: -1px;
    width: 14px;
    height: 14px;
    background: url("../../../assets/img/common/collect.svg") 0 0/14px 14px;
  }
</style>
